<template>
  <div class="homepage">
    <div class="banner" style="position:relative">
      <!-- 鼠标滚动 -->
      <div class="scroll-tip cursor-point" @click="moveNextScrenn">
        <!-- <img class="mouse" src="@/assets/images/home/mouse.png" alt=""> -->
        <!-- <img class="home-arrow arrow1" src="@/assets/images/home/arrow-down.png" alt="">
        <img class="home-arrow arrow2" src="@/assets/images/home/arrow-down.png" alt="">
        <img class="home-arrow arrow3" src="@/assets/images/home/arrow-down.png" alt=""> -->
        <i class="el-icon-arrow-down color-white xui-display-block arrow1"></i>
        <i class="el-icon-arrow-down color-white xui-display-block arrow2"></i>
        <i class="el-icon-arrow-down color-white xui-display-block arrow3"></i>
      </div>


      <!-- 轮播图 -->
      <swiper :options="swiperOption" v-if="banners.length > 0">
        <swiper-slide v-for="(banner,index) in banners" class="swiper-slide" :style="{height:`${clientHeight}px`}" :key="`bannder${index}`">
          <a class="xui-block" :href="banner.url" target="_blank">
            <div class="slide-item" :style="{height:`${clientHeight}px`, backgroundImage:`url(${banner.picUrl})`}"></div>
          </a>
        </swiper-slide>
        <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
        <div class="building-wrap building-top" style="width:1596px;">
          <img :src="buildingTopPic" alt="" style="width:100%;">
        </div>
      </swiper>
    </div>

      <!-- 轮播图 -->
      <!-- <swiper :options="swiperOption">
        <swiper-slide class="swiper-slide" :style="{height:`${clientHeight}px`}">
          <div class="slide-item slide-1" :class="activeIndex === 1" :style="{height:`${clientHeight}px`}"></div>
        </swiper-slide>
        <swiper-slide class="swiper-slide" :style="{height:`${clientHeight}px`}">
          <div class="slide-item slide-2" :class="activeIndex === 2" :style="{height:`${clientHeight}px`}"></div>
        </swiper-slide>
        <swiper-slide class="swiper-slide" :style="{height:`${clientHeight}px`}">
          <div class="slide-item slide-3" :class="activeIndex === 3" :style="{height:`${clientHeight}px`}"></div>
        </swiper-slide>
        <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
        <div class="building-wrap building-top" style="width:1596px;">
          <img :src="buildingTopPic" alt="" style="width:100%;">
        </div>
      </swiper>
    </div> -->

    <!-- main -->
    <div class="main">
      <div class="container">
        <div class="xui-margin-vertical xui-text-center">
          <img src="@/assets/images/home/logo-black.png" alt="">
          <p class="xui-margin-top-sm color-gray"> 省会地标 长沙客厅 百姓乐园 文化圣殿</p>
        </div>
        <div class="xui-fc xui-grid-avg-3 xui-margin-top-xl">
          <div class="xui-padding-horizontal-md">
            <!-- 最新资讯 -->
            <div class="home-block news-block" style="height: 572px;">
              <div class="home-block-hd xui-text-center">
                <p>NEWS</p>
              </div>
              <div class="home-block-bd">
                <ul>
                  <li class="home-news-item" v-for="(item,index) in news" :key="`news-${index}`">
                    <div class="date-box">
                      <h4>{{item.publishDate.split('-')[2]}}</h4>
                      <p>{{item.publishDate.split('-')[0]}}-{{item.publishDate.split('-')[1]}}</p>
                    </div>
                    <router-link class="home-news-item-content xui-text-truncate-line-2" :to="`/News/News-list-83/detail/${item.id}`" style="height:44px">{{item.title}}</router-link>
                  </li>
                </ul>
                <router-link to="/News/News-list-83/" class="more-btn xui-margin-top-xl">READ MORE</router-link>

              </div>
            </div>
          </div>
          <!--参观-->
          <div class="xui-padding-horizontal-md">
            <div class="home-block guide-block xui-margin-bottom-sm" style="height: 372px;">
              <div class="home-block-hd xui-text-center">
                <p>VISIT</p>
              </div>
              <div class="home-block-bd">
                <div class="visit-time">
                  <div class="title" style="font-size: 18px;letter-spacing: 2px;padding: 17px 0 0 7px;">Time</div>
                  <div class="time-content xui-fc">
                    <div class="grey-box xui-fc">
                      <div class="xui-fl xui-text-center">
                        <div>
                          <span class="hour">9</span>
                          <span class="min">:00</span>
                        </div>
                        <p style="color:#666;position:relative; top:-15px">Opening</p>
                      </div>
                      <div class="xui-fl line"></div>
                      <div class="xui-fl xui-text-center">
                        <div>
                          <span class="hour">16</span>
                          <span class="min">:30</span>
                        </div>
                        <p style="color:#666;position:relative; top:-15px">Stop checking</p>
                      </div>
                      <div class="xui-fl line"></div>
                      <div class="xui-fl xui-text-center">
                        <div>
                          <span class="hour">17</span>
                          <span class="min">:00</span>
                        </div>
                        <p style="color:#666;position:relative; top:-15px">Closed</p>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="color-darken-gray time-tip xui-padding-horizontal-sm">Tips：Monday (except national holidays) and Lunar New Year's Eve, the first day of the first month, the first
                  day of the first month are closed</p>
              </div>
            </div>
            <div class="" style="height: 190px;">
              <a class="img-link item1" href="http://beixinbc.com/cbwg/" target="_blank">
                <div class="title-wrap" style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
                  <!-- <img src="@/assets/images/home/icon.png"/> -->
                  <p class="color-white xui-font-size-xxl">Panorama Roaming</p>
                </div>
                <img-box width="100%" height="189" :imgSrc="imgLink1"></img-box>
              </a>
            </div>
          </div>
          <!--地址-->
          <div class="xui-padding-horizontal-md">
            <div class="home-block news-block" style="height: 572px;">
              <div class="home-block-hd xui-text-center">
                <p>GUIDE</p>
              </div>
              <div class="home-block-bd xui-margin-top-xl">
                <div class="address-info-box">
                  <p class="xui-margin-left-xl xui-margin-bottom-xxl">
                    <span class="xui-font-size-sm color-primary">Address：</span>
                    <span class="xui-font-size-sm">Changsha City, Hunan Province, Kaifu District,New River Delta Riverside Cultural Park</span>
                  </p>
                  <p class="xui-margin-left-xl xui-margin-bottom-xxl">
                    <span class="xui-font-size-sm color-primary">Bus：</span>
                    <span class="xui-font-size-sm">2,237,357,520,804,906 (North Star Times Square)520, 804 Road (Binjiang Cultural Park)</span>
                  </p>
                  <p class="xui-margin-left-xl xui-margin-bottom-xxl">
                    <span class="xui-font-size-sm color-primary">Subway：</span>
                    <span class="xui-font-size-sm">Beichen Delta Station (Subway Line 1)</span>
                  </p>
                  <p class="xui-margin-left-xl xui-margin-bottom-xxl">
                    <span class="xui-font-size-sm color-primary">Tel：</span>
                    <span class="xui-font-size-sm">0731-82892350/82892360</span>
                  </p>
                  <p class="xui-margin-left-xl color-gray">Please bring a valid ID, such as ID card, student ID, Hong Kong and Macau Pass, passport, and senior citizen's
                    card to visit.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerNav from "@/components/container/headerForHome";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "@/assets/css/home.less";
import imgBox from "@/components/widge/img-box";
import imgLink1 from "@/assets/images/home/img-link-1.png";
import imgLink2 from "@/assets/images/home/img-link-2.png";
import imgLink3 from "@/assets/images/home/img-link-3.jpg";
import buildingTopPic from "@/assets/images/home/building-top.png";
import { removeClass, addClass, hasClass, IEVersion } from "@/utils";
import { getBanner,getEngHomeList } from "@/api/list";
export default {
  components: {
    headerNav,
    swiper,
    swiperSlide,
    imgBox
  },
  data() {
    return {
      banners: [],
      activeIndex: 1,
      buildingTopPic,
      imgLink1,
      imgLink2,
      imgLink3,
      clientHeight: null,

      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletClass: "my-bullet",
          bulletActiveClass: "my-swiper-pagination-bullet-active"
        },
        spaceBetween: 30,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
          stopOnLastSlide: false
        },
        loop: true,
        effect: "fade",
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev"
        // },
        on: {
          slideChangeTransitionEnd: function() {
            let items = document.querySelectorAll(".swiper-slide");
            let activeItem = document.querySelectorAll(".swiper-slide")[
              this.activeIndex
            ].firstChild;
            for (let i = 1; i < items.length; i++) {
              removeClass(items[i].firstChild, "scale");
            }
            addClass(activeItem, "scale");
          }
        }
      },
      clientHeight: this.getClientHeight(),
      coords: {
        poly1: "134,0,635,124,0,296",
        poly2: "635,124,0,296, 754,296",
        poly3: "754,296,635,124,1183,0,1083,296",
        poly4: "1083,296,1183,0,1527,103,1565,296"
      },
      news: []
    };
  },
  methods: {
    getBanner() {
      getBanner().then(res => {
        this.banners = res.data.recordsList;
      });
    },
    getNews() {
      getEngHomeList().then(res => {
        this.news = res.data.recordsList;
      });
    },
    getClientHeight() {
      let clientHeight = 0;
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight =
          document.body.clientHeight < document.documentElement.clientHeight
            ? document.body.clientHeight
            : document.documentElement.clientHeight;
      } else {
        clientHeight =
          document.body.clientHeight > document.documentElement.clientHeight
            ? document.body.clientHeight
            : document.documentElement.clientHeight;
      }
      return clientHeight;
    },
    moveNextScrenn() {
      let isIe = IEVersion() !== -1 ? true : false;
      console.log(IEVersion());
      if (isIe) {
        window.scrollTo(0, this.clientHeight);
      } else {
        const currentY =
          document.documentElement.scrollTop || document.body.scrollTop;
        scroll(currentY, this.clientHeight);
      }
    }
  },
  mounted() {
    this.getNews();
    this.getBanner();
    this.clientHeight = this.getClientHeight();
  }
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 1399px) {
  .homepage
    .main
    .container
    .home-block.guide-block
    .visit-time
    .time-content
    .hour {
    font-size: 26px !important;
  }
  .home-block.guide-block .visit-time .time-content .min {
    font-size: 15px !important;
  }
  .home-block.guide-block .visit-time .time-content p {
    font-size: 13px;
    margin-top: 5px;
  }
  .homepage
    .main
    .container
    .home-block.guide-block
    .visit-time
    .time-content
    .line {
    width: 8px !important;
    margin: 0 10px;
    padding-top: 20px;
  }
}

@media screen and (max-width: 1559px) and (min-width: 1400px) {
  .homepage
    .main
    .container
    .home-block.guide-block
    .visit-time
    .time-content
    .line {
    width: 12px !important;
  }
  .homepage
    .main
    .container
    .home-block.guide-block
    .visit-time
    .time-content
    .hour {
    font-size: 38px !important;
  }
  .homepage
    .main
    .container
    .home-block.guide-block
    .visit-time
    .time-content
    .min {
    font-size: 22px !important;
  }
}
</style>
